<template>
  <section class="content">
    <h3>{{label}}</h3>
    <ul class="item">
      <li v-for="item of content" :key="item.id">
        <img class="imgBanner" v-lazy="item.imgUrl" alt=""/>
        <h5 class="title">
          <img v-show="item.labelImage" v-lazy="item.labelImage"/>
          {{item.title}}
        </h5>
        <span class="label" v-if="item.label">{{item.label}}</span>
        <div class="price">
          <div class="price_num">￥{{item.price}}</div>
          <div class="cart">
            <img src=""/>
          </div>
        </div>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  name: 'ContentSon',
  props: ['label', 'content', 'sonNum'],
  data () {
    return {
      gotop: false
    }
  },
  watch: {
    sonNum () {
      if (this.sonNum >= 0) {
        this.scrollTop()
      }
    }
  },
  methods: {
    scrollTop () {
      let scrollToTop = setInterval(function () {
        let pos = window.pageYOffset // 垂直方向滚动的像素。
        if (pos > 20) {
          window.scrollTo(0, pos - 500) // 滑动到顶部 60代表速度 数字越大速度越快
          // window.scrollTo(0, 0)
        } else {
          window.clearInterval(scrollToTop)
        }
      }, 100)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../../../../../../../assets/styl/color.styl"
  .content
    margin -150px 11px 15px 11px
    box-sizing border-box
    h3
      font-size 20px
      color #fff
    .item
      -moz-column-count: 2;
      /* Firefox */
      -webkit-column-count: 2;
      /* Safari 和 Chrome */
      column-count: 2 // 俩列
      -moz-column-gap: 11px
      -webkit-column-gap: 11px
      column-gap 11px // 间距为11px
      margin-top 20px
      li
        padding: 0
        margin 0 0 11px 0 // 底部的距离
        -moz-page-break-inside: avoid
        -webkit-column-break-inside: avoid
        break-inside: avoid
        border-radius 7px
        overflow hidden
        background #fff
        .imgBanner
          width 100%
        .title
          margin 3px 6px
          font-size 14px
          line-height 1.3
          color #222
          ellipsis2()
          img
            width 50px
            margin-bottom -2px
        .label
          border 1px solid #f23030
          color #f23030
          font-size 12px
          padding 2px 6px 0
          border-radius 20px
          margin-left 6px
        .price
          margin 3px 6px
          display flex
          align-items center
          justify-content center
          margin-bottom 10px
          .price_num
            font-size 15px
            color 333
            font-weight 600
            width 50%
          .cart
            flex 1
            text-align right
            img
              width 25px
      li:nth-child(odd)
        margin-left 0
  .gotop
    position fixed
    top 0
</style>
